<template>
    <div class="body">
        <div class="pie-area" :id="uuid"></div>
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";

export default defineComponent({
    // setup() {
    //     function S4() {
    //         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    //     }
    //     function guid() {
    //         return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    //     }
    //     let uuid = guid();
    //     return { uuid }
    // },
    props: {
        uuid:String,
        optionData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    // watch: {
    //     opinionData: {
    //         handler(newVal, oldVal) {
    //             if (this.charts) {
    //                 newVal ? this.setOption(newVal) : this.setOption(oldVal);
    //             }
    //         },
    //     }
    // },
    // data() {
    //     return {
    //         charts: null,
    //     }
    // },
    // mounted() {
    //     this.drawPie(this.id);
    // },
    // beforeDestroy() {
    //     this.charts.dispose();  // 销毁实例
    //     this.charts = null;
    // },
    // methods: {

    //     drawPie(id) { // 绘制饼状图
    //         this.charts = Echarts.init(document.getElementById(id));
    //         this.setOption(this.opinionData);
    //     }
    // }
});
</script>

<style>
.body {
    height: calc(100% - 20px);
}
.pie-area::after {
    content: attr(id);
}
.pie-area {
    color: seashell;
    width: 400px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    margin: 5px;
}
</style>